<template>
	<view>
		<view class="shop" v-if="!isLoading && car.length>0" :style="{paddingTop:device.navigationBarHeight+'px'}">
			<u-swipe-action>
				<u-swipe-action-item v-for="(item, index) in car" :key="index" @click="onDelGoods(item)" :options="options1">
					<view :class="index != car.length -1 ? 'seperate-line' : ''">
						<view class="goods" @click="onSelectGoods(index)">
							<view :class="item.checked ? 'check_box checked' : 'check_box'">
								<image src="../static/icon/ic_checked.png"></image>
							</view>

							<x-image class="x-image" :src="`${imageUrl}${item.picturePath}`"></x-image>

							<view class="goods_info">
								<view class="goods_data">
									<view class="goods_title">{{ item.goodsName }}</view>

									<view class="goods-unit" v-if="item.unit && item.unit.length>0">
										单位：{{item.unit}}</view>
									<view class="goods_num">
										<price v-if="item.price && item.price>0" :value="item.price" />
										<u-number-box v-model="item.quantity" :step="1"
											@change="onNumberChange(item, index, $event)"></u-number-box>
									</view>
									
								</view>
							</view>
						</view>

					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>


		<!-- 空图标提示 -->
		<view v-else class="empty">
			<u-empty v-if="!isLoading && car.length==0" mode="car"></u-empty>
		</view>

		<!-- <ad-goods /> -->


		<view class="floor"></view>
		<view class="footer" :style="{bottom:device.isNotchScreen?28*2+90+'rpx':90+'rpx'}">
			<view class="footer_left">
				<view :class="isCheckedAll? 'check_box checked' : 'check_box'" @click="onSelectAll">
					<image src="../static/icon/ic_checked.png"></image>
				</view>
				<text class="footer_all">全选</text>
			</view>
			<view class="footer_right">
				<view class="x-secondary-text">
					合计：￥{{ totalAmount.toFixed(2) }}
					<view v-if="userInfo && userInfo.discountRate>0">
						预计可优惠￥{{getDiscountPrice(totalAmount, userInfo.discountRate)}}</view>
				</view>
				<button class="btn_pay x-btn" :disabled="totalAmount<=0" @click="onPay">结算</button>
			</view>
		</view>

	</view>
</template>

<script>
	import config from '@/config';
	import {
		subOrder
	} from '@/api/order.js';
	import {
		getGoodsByIds
	} from '@/api/goods.js'
	import {
		mapState
	} from 'vuex'
	import adGoods from '@/components/adGoods/index'
	import XImage from '@/components/image/xImage.vue'
	export default {
		components: {
			adGoods,
			XImage
		},
		computed: {
			...mapState(['userInfo','device'])
		},
		data() {
			return {
				options1: [{
					icon: 'trash-fill',
					style: {
						backgroundColor: '#e45656',
						width: '40px',
						height: '40px',
						borderRadius: '100px',
						margin: '0 6px'
					}
				}],
				imageUrl: config.imageUrl, 
				car: [],
				totalAmount: 0,
				isLoading: false,
				isCheckedAll: false,
			};
		},
		created() {
			console.log('购物车出现')
			const car = uni.getStorageSync('car') || [];
			for(var i = 0;i<car.length;i++){
				car[i].checked = false;
			}
			this.car = car
		},
		beforeDestroy() {
			this.isCheckedAll = false
			this.totalAmount = 0;
			uni.setStorageSync('car', this.car)
		},
		onLoad() {

		},
		methods: {
			onNumberChange(item, index, e) {
				console.log(e)
				
				var num = e.value;
				if (index < this.car.length) {
					if (item.checked) {
						if (item.quantity > num) {
							this.totalAmount -= (item.quantity - num) * item.price
						} else {
							this.totalAmount += (num - item.quantity) * item.price
						}
					}
					item.quantity = num;
				}
			},
			onDelGoods(goods) {
				this.car = this.car.filter(item => {
					return item.id != goods.id;
				});
				uni.setStorageSync('car', this.car);
			},

			onSelectGoods(index) {
				this.car[index].checked = !this.car[index].checked

				let checkedLength = 0
				let totalAmount = 0
				for (let i = 0; i < this.car.length; ++i) {
					let item = this.car[i]
					if (item.checked) {
						checkedLength += 1
						totalAmount += (item.price * item.quantity)
					}
				}
				this.totalAmount = totalAmount
				if (checkedLength == this.car.length) {
					this.isCheckedAll = true
				} else {
					this.isCheckedAll = false
				}
			},

			onSelectAll() {
				this.isCheckedAll = !this.isCheckedAll
				console.log("this.car=", this.car, ",isCheckedAll=", this.isCheckedAll)
				let totalAmount = 0
				if (this.isCheckedAll) {
					this.car.map((item, index) => {
						item.checked = true
						totalAmount += (item.price * item.quantity)
						return item
					})
				} else {
					this.car.map((item, index) => {
						item.checked = false
						return item
					})
				}
				this.totalAmount = totalAmount
			},

			onPay() {
				const order = new Object()
				order.orderDetailEntityList = new Array();
				const newCar = new Array();
				for (var j = 0; j < this.car.length; j++) {
					if (this.car[j].checked) {
						order.orderDetailEntityList.push(this.car[j]);
					}else{
						// 购物车剩余商品
						newCar.push(this.car[j]);
					}
				}
				subOrder(order).then(res => {
					this.car = newCar;
					uni.navigateTo({
						url: `/pages/index/subOrder?id=${res.id}&isCar=${true}`
					});
				});
			},
			
			getDiscountPrice(totalAmount, discountRate) {
				// dicountRate取值范围 1~10， 该函数返回被折扣抵消的金额
				let price = (totalAmount*10 - totalAmount*discountRate)*0.1
				return price.toFixed(2);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";
	$secondary-color: #999;

	.shop {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #f1f1f1;
	}


	.floor {
		width: 100%;
		height: 90rpx;
	}


	.swipe-action__content {
		// border-bottom: 2rpx solid #E5E5E5;
	}

	.x-image {
		width: 180rpx;
		height: 180rpx;
		margin-right: 10rpx;
	}

	.seperate-line {
		border-bottom: 1px solid #E5E5E5;
	}

	.goods {
		// height: 220rpx;
		border-radius: 10rpx;
		margin: 32rpx;
		display: flex;
		align-items: center;
	}

	.goods_info {
		display: flex;
		align-items: center;
		width: 420rpx;
		height: 100%;
		overflow: hidden;
	}

	.goods_img>image {
		width: 100%;
	}

	.goods_info>.goods_data {
		// width: 396rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.goods_title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		padding-top: 10rpx;
	}

	.goods-unit {
		font-family: PingFang-SC;
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: $secondary-color;
	}

	.goods_num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.footer {
		width: 100%;
		height: 90rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.2);
		position: fixed;
		left: 0;
		z-index: 10;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.footer_right {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.footer_all {
		margin-left: 20rpx;
	}

	.btn_pay {
		width: 224rpx;
		height: 60rpx;
		/* background-color: #e51c23; */
		/* color: #fff; */
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.btn_pay:disabled {
		background-color: #f1f1f1;
		color: #333;
	}

	.footer_left {
		display: flex;
		align-items: center;
	}

	.empty {
		width: 100%;
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #F5F5F5;
	}

	.check_box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 2rpx solid #909399;
		margin-right: 10rpx;
		display: flex;
	}

	.checked {
		background-color: #e51c23;
		border-color: #e51c23;
	}

	.check_box>image {
		width: 32rpx;
		height: 32rpx;
		/* margin: auto; */
	}
</style>

<style lang="scss">
	@import "@/mixins/theme/xTheme.scss";

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		// padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			// padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}
</style>